<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        a{
            margin: 100px;
            padding: 20px;
            /* width: 100px;
            height: 100px; */
        }
    </style> -->
</head>
<body>
    <!-- <a href="#">百度</a>
    <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> -->
    <script>
        function buildTree(data) {
    let map = {};
    let result = [];
    data.forEach(item => {
      map[item.id] = { ...item, children: [] };
    });
    Object.values(map).forEach(item => {
      if (!item.parentId) {
        result.push(item);
      } else {
        map[item.parentId].children.push(item);
      }
    });
    return result;
  }
  
  const arr = [
    { id: 1, parentId: null },
    { id: 2, parentId: 1 },
    { id: 3, parentId: 1 },
    { id: 4, parentId: 2 },
    { id: 5, parentId: 2 },
    { id: 6, parentId: 3 },
  ];
  
  let tree = buildTree(arr);
  console.log(tree);
    </script>
</body>
</html>